<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 触发change事件 -->
        <counter ref="one" @change="handleChange"></counter>
        <counter ref="two" @change="handleChange"></counter>
        <!-- 实现对两个counter总数的计算 -->
        <div>{{total}}</div>
    </div>


    <script>
        Vue.component("counter", {
            // 点击实现自增
            template: "<div @click='handleClick'>{{number}}</div>",
            // 子组件的数据是函数，注意注意！！！
            data() {
                return {
                    number: 0
                }
            },
            methods: {
                handleClick: function () {
                    this.number++
                    // 当子组件触发点击事件时，子组件向父组件传递change事件
                    this.$emit('change')
                }
            },
        })
        var vm = new Vue({
            el: "#app",
            data: {
                total: 0
            },
            methods: {
                // 当子组件被点击时，都能触发handleChange这个事件
                handleChange: function () {
                    // 这样就能拿到每一个组件里面的number值
                    console.log(this.$refs.one.number);
                    console.log(this.$refs.two.number);

                    this.total = this.$refs.one.number + this.$refs.two.number

                }
            }

        })
    </script>
</body>

</html>